<template>
	<div class="person">
		<h1>情况二：监视【reactive】定义的【对象类型】数据</h1>
		<h2>姓名：{{ person.name }}</h2>
		<h2>年龄：{{ person.age }}</h2>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePerson">修改整个人</button>
	</div>
</template>

<script setup name="Person">
import {reactive, watch} from 'vue'
// 数据
let person = reactive({
	name: '张三',
	age: 18
})

// 方法
function changeName() {
	person.name += '~'
}

function changeAge() {
	person.age += 18
}

function changePerson() {
	//reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）
	//person = {name: 'lisi', age: 23}
	//person = reactive({name: 'lisi', age: 23})
	person = Object.assign(person, {name: 'lisi11', age: 23})
}

// 监视，情况二：监视【reactive】定义的【对象类型】数据
watch(person, (newValue, oldValue) => {
	console.log('person变化了', newValue, oldValue)
})

</script>

<style scoped>
.person {
	background-color: skyblue;
	box-shadow: 0 0 10px;
	border-radius: 10px;
	padding: 20px;
}

button {
	margin: 0 5px;
}

li {
	font-size: 20px;
}
</style>